<template>
  <div
    style="height: 36px;position: absolute;right: 40px;top: 20px;display: flex;flex-direction: row-reverse;align-items: center">
    <div>
      <div v-show="isFold"
           style="height: 36px; display: flex;flex-direction: row-reverse;align-items: center;margin-right: 5px">
        <div class="toolItem" @click="clear">
          <span class="iconfont  icon-shezhi_qingchuhuancun"></span><span>清除</span>
        </div>
        <!--<div class="toolSplitLine"></div>-->
        <div class="toolItem" @click="fullMap">
          <span class="iconfont  icon-quantu"></span><span>全图</span>
        </div>
        <!--<div class="toolSplitLine"></div>-->
        <div class="toolItem">
          <el-dropdown @visible-change="dropDown" trigger="click" @command="measure">
           <span class="el-dropdown-link">
            <span>测量</span><span :class="[isDropDown?'el-icon-caret-top':'el-icon-caret-bottom']"></span>
           </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="point">测点</el-dropdown-item>
              <el-dropdown-item command="length">测距离</el-dropdown-item>
              <el-dropdown-item divided command="area">测面积</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <!--<div class="toolSplitLine"></div>-->
        <div class="toolItem" @click="closeLegend">
          <span class="iconfont  icon-tuli1"></span><span>图例</span>
        </div>
        <img style="width: 36px" src="../../assets/img/back.png" alt="" @click="toggle">
      </div>
      <div v-if="!isFold" @click="toggle">
        <img style="width: 36px" src="../../assets/img/go.png" alt="" >
      </div>
    </div>
  </div>
</template>

<script>
  import MeasureLength from "../../model/MeasureLength";
  import MeasureArea from "../../model/MeasureArea";
  import MeasurePoint from "../../model/MeasurePoint";

  export default {
    name: "EditGroup",
    props: {
      stateManager: {
        type: Object,
        default: null
      },
      map: {
        type: Object,
        default: null
      },
    },
    data() {
      return {
        isFold: true,
        isDropDown: false
      };
    },
    mounted() {

    },
    methods: {
      goBack() {
        let that = this;
        that.$router.go(-1);
        this.$bus.emit("goBackFlag");
      },
      fullMap() {
        if (this.map) {
          this.map.setCenter([113.613296188474, 33.8824613831615]);
          this.map.setZoom(6);
        }
      },
      clear() {
        this.$emit("clear");
        this.stateManager.removeCurrent();
      },
      measure(e) {
        switch (e) {
          case "length":
            this.measureLength();
            break;
          case "area":
            this.measureArea();
            break;
          case "point":
            this.measurePoint();
            break;
          default:
            break;
        }
      },
      measureLength() {
        this.stateManager.setCurFun(new MeasureLength(this.map));
      },
      measureArea() {
        this.stateManager.setCurFun(new MeasureArea(this.map));
      },
      measurePoint() {
        this.stateManager.setCurFun(new MeasurePoint(this.map));
      },
      dropDown(state) {
        this.isDropDown = state;
      },
      toggle() {
        this.isFold = !this.isFold;
      },

      closeLegend() {
        if (this.map) {
          this.$bus.emit("toggleLegendColor", this.map);
        }

        this.$bus.emit("toggleLegend");
      }
    }
  };
</script>

<style scoped>
  .tooBtn {
    color: white;
  }

  .tooBtn:hover {
    color: #0AC8FF;
  }

  .toolItem {
    border-right: 1px solid #283170;
    color: white;
    width: 70px;
    height: 36px;
    background-color: #101A64;
    text-align: center;
    line-height: 36px;
  }

  .toolItem .el-dropdown-link {
    color: white;
  }

  .toolItem > span:last-child {
    margin-left: 2px;
  }

  .toolItem:hover, .toolItem .el-dropdown-link:hover {
    color: #0AC8FF;
  }

  .toolSplitLine {
    width: 1px;
    height: 22px;
    background: #283170;
    border-radius: 1px;
  }
</style>

<style>
  .toolItem .el-dropdown-menu__item {
    color: white;
  }
</style>
